<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="layui-v2.5.7/layui/css/layui.css">
    <link rel="stylesheet" href="./css/hotbooks.css">
    <script src="dataJs/data.js"></script>
    <script src="layui-v2.5.7/layui/layui.js"></script>
    <script src="jquery/jquery 1.11.0/jquery-1.11.0.js"></script>
    <script src="./js/hotbooks.js"></script>
    <script src="./template-web.js"></script>
</head>

<body>
    <div class="layui-container container">
        <span>
            <span>图书管理</span> /
            <span> 热销书展示</span>
            <span class="clear"></span>
        </span>

        <div class="warp1">
            <div id="flexBox">
            </div>
            <div id="demo0"></div>
        </div>
    </div>
    <!-- 小框模板 -->
    <script type="text/html" id="demo">
        {{each thisBook value index}}
        <div class="boxes">
            <img src="imgs/books/{{ value.img }}" alt="" class="imgStyle">
            <p class="texts">{{ value.desc }}</p>
            <span class="cheap">团购价{{ value.newPrice }}</span><span class="discountPrice">{{value.oldPrice}}</span><div class="discount">{{(value.newPrice/value.oldPrice*10).toFixed(1)}}折</div>
        </div>
        {{/each}}
    </script>

    <script>
        layui.use(['laypage', 'layer'], function () {
            var laypage = layui.laypage
            , layer = layui.layer;
            var books = JSON.parse(localStorage.getItem("books"));
            laypage.render({
                elem: 'demo0'
                , count: 12 //数据总数
                , limit: 6
                , jump: function (obj) {
                    //模拟渲染
                    thisBook = books.concat().splice(obj.curr * obj.limit - obj.limit, obj.limit);
                    string=template("demo", { thisBook: thisBook });
                    document.getElementById('flexBox').innerHTML = string;
                }
            });
        });
    </script>
</body>

<script>
    layui.use('layer', function () {
        var layer = layui.layer;
    });
</script>

</html>